import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { Avatar, Icon } from 'react-native-elements'

class Component extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
    const comments = this.props.data
    return (
      <View style={styles.comments}>
        {
          comments.map((v, idx) => {
            return this.renderComment(v, idx)
          })
        }
      </View>
    )
  }

  renderComment (item, idx) {
    let { user } = item
    return (
      <View style={styles.comment} key={idx}>
        <Avatar
          size="small"
          rounded
          source={{ uri: user.avatar_url }}
          activeOpacity={0.7}
        />

        <View style={{marginLeft: 10, flex: 1}}>
          <Text style={{color: '#A0AEC0'}}>{user.name}</Text>
          <Text style={{marginTop: 5, color: '#4A5568'}}>{item.comment}</Text>

          <View style={{flexDirection: 'row', marginTop: 5}}>
            <View style={{flex: 1, flexDirection: 'row'}}>
              <Text style={{color: '#A0AEC0'}}>24分钟前</Text>
              <Text style={{color: '#A0AEC0'}}> · </Text>
              <Text style={styles.replybtn}>5条回复</Text>
            </View>
            <View style={{flex: 0, flexDirection: 'row'}}>
              <Text>123</Text>
              <Icon name='bulb-outline' size={16} type="ionicon"/>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  comments: {
    paddingHorizontal: 10,
    paddingVertical: 10,
    backgroundColor: 'white'
  },
  comment: {
    flexDirection: 'row',
    paddingVertical: 10
  },
  replybtn: {
    color: '#4299E1',
    // backgroundColor: '#ccc',
    // paddingVertical: 2,
    // paddingHorizontal: 5,
    // fontSize: 13,
    // borderRadius: 9,
    // overflow: 'hidden'
  }
})

export default Component
